<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        body {
            background-color: rgb(254, 254, 254);
        }

        /* 背景盒子样式 */
        .box {
            background-image: url("{{ url_for('static', filename='login/image.png') }}");
            background-repeat: no-repeat;
            background-size: cover;
            margin: 2px;
            width: 1000px;
            height: 588px;
            position: relative;
            left: 150px;
            top: 0px;

            /* width: 250px;
            height: 147px;
            position: relative;
            left: 500px;
            top: 70px; */
        }

        /* 背景盒子添加动画效果 */
        .box {
            animation: donghua1 1s linear 0.5s forwards;
        }

        @keyframes donghua1 {
            0% {
                width: 1000px;
                height: 588px;
                position: relative;
                left: 150px;
                top: 0px;
            }

            100% {
                width: 250px;
                height: 147px;
                position: relative;
                left: 500px;
                top: 70px;
            }
        }


        .dlzc {
            width: 430px;
            height: 250px;
            margin: 2px;
            border: 6px solid #796eb6;
            font-size: 30px;

            border-radius: 15px;
            padding-top: 20px;
            /* background-color: rgb(151, 139, 161); */
            position: relative;
            left: 400px;
            top: 70px;
            text-align: center;
            /* display: flex;
            flex-direction: column;
            justify-content: center; */
            /* align-items: center; */

        }

        .for {
            font-size: 20px;
        }


        .kun {
            height: 35px;
            width: 300px;
            margin-top: 10px;
            font-size: 16px;

        }

        .button {
            /* padding: 10px 20px; */
            width: 80px;
            height: 40px;
            margin-top: 20px;
            font-size: 16px;

        }

        /* .buttons {
            display: flex;
            justify-content: space-between;
        } */
        .button1 {
            margin-right: 70px;
        }

        .button2 {
            margin-left: 70px;
        }

        .qwe {
            color: #303030;
        }

        /* .dlzc {
            animation: donghua2 2s linear 0s forwards;
        }

        @keyframes donghua2 {
            0% {
                position: relative;
                left: 400px;
                top: 0px;
            }

            100% {
                position: relative;
                left: 400px;
                top: 70px;
            }
        } */
    </style>
</head>

<body>
<div class="box">
</div>

<!-- 这是登录注册的部分 -->
<div class="dlzc">
    <div class="qwe">登录</div>

    <form action="denglu.php" method="post" class="for">
        <input type="text" placeholder="用户名" name="username" required class="kun">
        <input type="password" placeholder="密码" name="password" required class="kun">

        <div>
            <button type="submit" class="button button1">登录</button>
            <button class="button button2" onclick="danji()">注册</button>
        </div>
    </form>
</div>
<script>
    function danji() {
        window.location.href = "zcjm.html";
    }
</script>
</body>

</html>